<template>
  <div class="funds-analysis">
    <div class="header">
      <h2>资金穿透分析</h2>
      <div class="controls">
        <el-input v-model="account" placeholder="输入账号" style="width: 200px; margin-right: 10px" />
        <el-select v-model="direction" placeholder="方向" style="width: 100px; margin-right: 10px">
          <el-option label="流出" value="out" />
          <el-option label="流入" value="in" />
        </el-select>
        <el-input-number v-model="depth" :min="1" :max="5" label="层级" style="width: 120px; margin-right: 10px" />
        <el-input-number v-model="minAmount" :min="0" :step="1000" label="最小金额" style="width: 150px; margin-right: 10px" />
        <el-button type="primary" @click="analyze" :loading="loading">开始分析</el-button>
      </div>
    </div>
    
    <div class="chart-container" ref="chartRef"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';

const route = useRoute();
const caseId = route.query.caseId;

const account = ref('');
const direction = ref('out');
const depth = ref(3);
const minAmount = ref(0);
const loading = ref(false);
const chartRef = ref(null);
let chartInstance = null;

const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value);
  }
};

const analyze = async () => {
  if (!account.value) {
    ElMessage.warning('请输入账号');
    return;
  }

  loading.value = true;
  try {
    const result = await window.electronAPI.analysis.traceFunds({
      caseId,
      account: account.value,
      options: {
        depth: depth.value,
        minAmount: minAmount.value,
        direction: direction.value
      }
    });

    renderSankey(result);
  } catch (error) {
    console.error('Analysis failed:', error);
    ElMessage.error('分析失败: ' + error.message);
  } finally {
    loading.value = false;
  }
};

const renderSankey = (data) => {
  if (!chartInstance) initChart();

  const option = {
    title: {
      text: '资金流向桑基图'
    },
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [
      {
        type: 'sankey',
        data: data.nodes,
        links: data.links,
        emphasis: {
          focus: 'adjacency'
        },
        lineStyle: {
          color: 'gradient',
          curveness: 0.5
        }
      }
    ]
  };

  chartInstance.setOption(option);
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', () => chartInstance?.resize());
});

onUnmounted(() => {
  window.removeEventListener('resize', () => chartInstance?.resize());
  chartInstance?.dispose();
});
</script>

<style scoped>
.funds-analysis {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  flex: 1;
  min-height: 500px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>
